<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./swiper-bundle.css">
    <style>
        .swiper {
            width: 500px;
            height: 450px;
        }

        .one {
            /* background-color: red; */
            color: white;
            font-size: 30px;
            text-align: center;
            line-height: 450px;
        }

        .one img {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div class="swiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide one"></div>
            <div class="swiper-slide one"></div>
            <div class="swiper-slide one"></div>
        </div>
        <div class="swiper-button-prev"></div><!--左箭头。如果放置在swiper外面，需要自定义样式。-->
        <div class="swiper-button-next"></div><!--右箭头。如果放置在swiper外面，需要自定义样式。-->
        <div class="swiper-pagination"></div><!--分页器。如果放置在swiper外面，需要自定义样式。-->
    </div>
    <script src="./swiper-bundle.js"></script>
    <script>
        var mySwiper = new Swiper('.swiper', {
            autoplay: true,//可选选项，自动滑动
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            // loop: true,
              effect: 'fade',
            pagination: {
                el: '.swiper-pagination',
            },
        })
    </script>
    <script>
        let ones = document.querySelectorAll('.one')
        // console.log(ones);

        function swiperImg() {
            let xhr = new XMLHttpRequest()
            xhr.open('get', 'http://api.app.yami.byesame.com/indexImgs')
            xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
            xhr.send()
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4) {
                    let data = JSON.parse(xhr.responseText)
                    console.log(data);
                    let imgslist = data.data
                    console.log(imgslist);

                    for (let i = 0; i < imgslist.length; i++) {
                        let img = document.createElement('img')
                        img.src = imgslist[i].imgUrl
                        ones[i].appendChild(img)
                        // ones[i].src=imgslist[i].imgUrl
                    }
                }
            }
        }
        swiperImg()
    </script>

</body>

</html>